import {
  Table,
  Button,
  Popconfirm,
  Form,
  InputNumber,
  Select,
  Divider,
  Input,
  Checkbox,
} from 'antd';
import React, { Component } from 'react';
import BaseComponent from '@/components/BaseComponent';
import styles from './index.less';
import styled from 'styled-components';

const { Option } = Select;

const FormItemBox = styled.div`
  display: flex;
  align-items: center;
`;

/**
 * 内镜详情
 */
@Form.create()
class EsophagusView extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      form: [],
      data: [
        {
          id: this.generateId(),
        },
      ],
      columns: [],
      // 报告单存放地址
      reportFilePath: '',
      // 报告单url访问地址
      reportFileUrl: '',
      // 是否正在上传
      isUploading: false,
    };
  }

  componentDidMount() {
    const { sg } = this.props;
    if (sg !== undefined) {
      this.setState({
        data: sg,
      });
    }
    this.getColumns();
  }

  /**
   * 返回用户输入
   * @returns {*}
   */
  getUserInput = () => {
    const { form } = this.props;
    const { data } = this.state;
    const size = data.length;
    const values = form.getFieldsValue();

    const keys = Object.keys(values);

    const result = [];

    for (let i = 0; i < size; i++) {
      let obj = {};
      const ownKeys = keys.filter(each => {
        const tmp = each.split('-');
        const index = tmp[1];
        return index == i;
      });
      ownKeys.forEach(key => {
        const realKey = key.split('-')[0];
        obj[`${realKey}`] = values[key];
      });
      result.push(obj);
    }
    return result;
  };

  getColumns = () => {
    const { form, disabled = false } = this.props;
    const { getFieldDecorator } = form;
    let cs = [
      {
        title: '狭窄不能通过',
        render: (text, record, index) => {
          const { isNarrow } = record;
          return (
            <FormItemBox style={{ width: '100px' }}>
              <Form.Item>
                {getFieldDecorator(`isNarrow-${index}`, {
                  initialValue: isNarrow,
                })(
                  <div>
                    <Checkbox
                      disabled={disabled}
                      style={{ marginRight: '10px' }}
                      defaultChecked={isNarrow}
                    />{' '}
                    是
                  </div>
                )}
              </Form.Item>
            </FormItemBox>
          );
        },
      },
      {
        title: '病变侵及贲门',
        render: (text, record, index) => {
          const { isBbBm } = record;
          return (
            <FormItemBox style={{ width: '100px' }}>
              <Form.Item>
                {getFieldDecorator(`isBbBm-${index}`, {
                  initialValue: isBbBm,
                })(
                  <div>
                    <Checkbox
                      disabled={disabled}
                      style={{ marginRight: '10px' }}
                      defaultChecked={isBbBm}
                    />{' '}
                    是
                  </div>
                )}
              </Form.Item>
            </FormItemBox>
          );
        },
      },
      {
        title: '距离(CM)',
        render: (text, record, index) => {
          const { jlStart, jlEnd } = record;
          return (
            <FormItemBox>
              <Form.Item>
                {getFieldDecorator(`jlStart-${index}`, {
                  initialValue: jlStart,
                  rules: [
                    {
                      message: '距离数值必须在0-99之间',
                      pattern: /^([1-9]\d|\d)$/g,
                    },
                  ],
                })(
                  <InputNumber
                    disabled={disabled}
                    placeholder={'请输入'}
                    style={{ width: '80px', marginRight: '8px' }}
                  />
                )}
              </Form.Item>
              至
              <Form.Item>
                {getFieldDecorator(`jlEnd-${index}`, {
                  initialValue: jlEnd,
                  rules: [
                    {
                      message: '距离数值必须在0-99之间',
                      pattern: /^([1-9]\d|\d)$/g,
                    },
                  ],
                })(
                  <InputNumber
                    disabled={disabled}
                    placeholder={'请输入'}
                    style={{ width: '80px', marginLeft: '8px' }}
                  />
                )}
              </Form.Item>
            </FormItemBox>
          );
        },
      },
      {
        title: '点位',
        render: (text, record, index) => {
          const { dwStart, dwEnd } = record;
          return (
            <FormItemBox>
              <Form.Item>
                {getFieldDecorator(`dwStart-${index}`, {
                  initialValue: dwStart,
                  rules: [
                    {
                      message: '点位数值必须在0-12之间',
                      pattern: /^(\d|(1[0-2]))$/g,
                    },
                  ],
                })(
                  <InputNumber
                    disabled={disabled}
                    placeholder={'请输入'}
                    style={{ width: '80px', marginRight: '8px' }}
                  />
                )}
              </Form.Item>
              至
              <Form.Item>
                {getFieldDecorator(`dwEnd-${index}`, {
                  initialValue: dwEnd,
                  rules: [
                    {
                      message: '点位数值必须在0-12之间',
                      pattern: /^(\d|(1[0-2]))$/g,
                    },
                  ],
                })(
                  <InputNumber
                    disabled={disabled}
                    placeholder={'请输入'}
                    style={{ width: '80px', marginLeft: '8px' }}
                  />
                )}
              </Form.Item>
            </FormItemBox>
          );
        },
      },
      {
        title: '请选择分型',
        render: (text, record, index) => {
          const { fxCode, fxVal } = record;
          return (
            <FormItemBox>
              <Form.Item>
                {getFieldDecorator(`fxCode-${index}`, {
                  initialValue: fxCode,
                })(
                  <Select
                    disabled={disabled}
                    placeholder="请选择"
                    style={{ width: '100px', marginRight: '8px' }}
                  >
                    <Option key={1}>浅表型</Option>
                    <Option key={2}>进展性</Option>
                  </Select>
                )}
              </Form.Item>
              <Form.Item>
                {getFieldDecorator(`fxVal-${index}`, {
                  initialValue: fxVal,
                })(
                  <Select
                    disabled={disabled}
                    placeholder="请选择"
                    style={{ width: '100px', marginRight: '8px' }}
                  >
                    <Option key={1}>隆起型</Option>
                    <Option key={2}>溃疡型</Option>
                  </Select>
                )}
              </Form.Item>
            </FormItemBox>
          );
        },
      },
      {
        title: '是否活检',
        render: (text, record, index) => {
          const { isHj } = record;
          return (
            <FormItemBox>
              <Form.Item>
                {getFieldDecorator(`isHj-${index}`, {
                  initialValue: isHj,
                })(
                  <Select disabled={disabled} placeholder="请选择" style={{ width: '100px' }}>
                    <Option value={1}>是</Option>
                    <Option value={0}>否</Option>
                  </Select>
                )}
              </Form.Item>
            </FormItemBox>
          );
        },
      },
      ,
      {
        title: '活检块数',
        render: (text, record, index) => {
          const { hjNum } = record;
          return (
            <FormItemBox>
              <Form.Item>
                {getFieldDecorator(`hjNum-${index}`, {
                  initialValue: hjNum,
                })(<Input disabled={disabled} placeholder={'请输入'} style={{ width: '80px' }} />)}
              </Form.Item>
            </FormItemBox>
          );
        },
      },
      {
        title: '食管胃交界线距门齿约为(CM)',
        render: (text, record, index) => {
          const { sgWJl } = record;
          return (
            <FormItemBox>
              <Form.Item>
                {getFieldDecorator(`sgWJl-${index}`, {
                  initialValue: sgWJl,
                  rules: [
                    {
                      message: '点位数值必须在0-99之间',
                      validator: (rule, value, callback) => {
                        const { getFieldValue } = this.props.form;
                        if (value) {
                          const tmp = getFieldValue(`sgWJl-${index}`);
                          if (tmp > 99 || tmp < 0) {
                            callback('点位数值必须在0-99之间');
                          }
                        }
                        callback();
                      },
                    },
                  ],
                })(
                  <InputNumber
                    min={0}
                    max={99}
                    step={0.5}
                    // precision={1}
                    disabled={disabled}
                    placeholder={'请输入'}
                    style={{ width: '120px', marginRight: '8px' }}
                  />
                )}
              </Form.Item>
            </FormItemBox>
          );
        },
      },
      {
        title: '操作',
        width: 200,
        fixed: 'right',
        render: (text, record, index) => {
          return disabled ? null : (
            <div style={{ textAlign: 'right' }}>
              <Button
                style={{ marginRight: '8px' }}
                type="primary"
                size={'small'}
                onClick={() => this.handleAdd()}
              >
                添加病变
              </Button>
              <Popconfirm
                title="确定执行当前操作吗?"
                onConfirm={() => this.handleDelete(record.id)}
              >
                <Button type="danger" size={'small'}>
                  删除病变
                </Button>
              </Popconfirm>
            </div>
          );
        },
      },
    ];
    this.setState({
      columns: cs,
    });
  };

  handleDelete = id => {
    const data = [...this.state.data];
    if (data.length === 1) {
      this.errorMessage('至少保留一行！');
      return;
    }
    this.setState({
      data: data.filter(item => item.id !== id),
    });
  };

  handleAdd = () => {
    const { data } = this.state;
    const newData = {
      id: this.generateId(),
    };
    this.setState({
      data: [...data, newData],
    });
  };

  render() {
    const { data, columns } = this.state;
    return (
      <div className={styles.editableTable}>
        <h3>内镜诊断详情(食管)</h3>
        <Divider />
        <Table
          scroll={{ x: true }}
          rowKey={'id'}
          rowClassName={() => 'editable-row'}
          bordered
          dataSource={data}
          columns={columns}
          pagination={false}
        />
      </div>
    );
  }
}

export default EsophagusView;
